// 销售排行图表
<template>
  <div class="com_container" style="height: 100%">
    <div style="height: 100%" class="com_chart" ref="hot_page"></div>
    <span class="iconfont arrow_left" @click="toLeft" :style="comStyle">&#xe6ef;</span>
    <span class="iconfont arrpw_right" @click="toRight" :style="comStyle">&#xe6ed;</span>
    <p class="pie_title" :style="comStyle">{{ pieTitle }}</p>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getThemeValue } from '@/utils/theme_utils.js'
export default {
  name: "Hot",
  data() {
    return {
      dom: null, // 挂载图表容器的实例对象
      data: null, // 服务器中获取的数据
      timerId: null,
      currentIndex: 0, // 当前显示哪一个数据进行展示
      titleFontSize: 0  // 字体大小
    };
  },
  computed: {
    pieTitle() {
      if (!this.data) {
        return "";
      } else {
        return this.data[this.currentIndex].name;
      }
    },
    comStyle() {
      return {
        fontS2ize: this.titleFontSize + 'px',
        color: getThemeValue(this.theme).titleColor
      }
    },
    ...mapState(['theme'])
  },
  watch: {
    theme() {
      this.dom.dispose() // 销毁当前的图表
      this.initChart()  // 重新以最新的主题名称初始化图表对象
      this.screenAdapt()  // 完成屏幕的适配
      this.updateChart()  // 更新图表的展示
    }
  },
  // 模板渲染成html后调用
  mounted() {
    this.initChart(); // 初始化图表
    window.addEventListener("resize", this.screenAdapt);
    this.screenAdapt();
  },
  // 组件销毁后
  destroyed() {
    clearInterval(this.timerId); // 关闭定时器
    window.removeEventListener("resize", this.screenAdapt); // 移除这个事件
  },
  methods: {
    // 初始化echart实例(lnstance)对象
    initChart() {
      this.dom = this.$echarts.init(this.$refs.hot_page, this.theme);
      this.dom.setOption({
        title: {
          text: '▎热销商品占比',
          top: 20,
          left: 20
        },
        tooltip: {
          show: true,
          formatter: (arg) => {
            // console.log(arg)
            let thirdCategory = arg.data.children;
            // 计算出所有三级分类的数值总数
            let total = 0
            thirdCategory.forEach((item) => {
              total += item.value
            })
            let resStr = ''
            thirdCategory.forEach((item) => {
              resStr += `
                ${item.name} ${parseInt(item.value / total * 100)}%
                <br />
              `
            })
            return resStr
          }
        },
        series: [
          {
            type: "pie",
            label: { 
              show: false // 不让标签显示
            },
            labelLine: {
              show: false
            },
            emphasis: { // 高亮状态的扇区和标签样式
              label: {
                show: true  // 标签显示
              }
            }
          },
        ],
      });
      this.getData();
    },
    // 获取服务器的数据
    async getData() {
      // 获取数据
      const { data: res } = await this.$http.get("hotproduct");
      this.data = res;
      this.updateChart();
    },
    // 更新图表视图
    async updateChart() {
      let legendData = this.data[this.currentIndex].children.map((item) => {
        return item.name;
      });
      let seriesData = this.data[this.currentIndex].children.map((item) => {
        return {
          name: item.name,
          value: item.value,
          children: item.children // 三级分类
        };
      });
      // 配置项
      let option = {
        legend: {
          data: legendData,
          icon: 'circle',  // 图例项的 icon
          top: '15%'
        },
        series: [
          {
            data: seriesData,
          },
        ],
      };
      this.dom.setOption(option);
    },
    // 当浏览器大小发生变化时，就要让图表适配屏幕
    screenAdapt() {
      this.titleFontSize = this.$refs.hot_page.offsetWidth / 100 * 3.6
      this.dom.setOption({
        title: {
          textStyle: {
            fontSize: this.titleFontSize * 1.5,
            fontWeight: 900
          }
        },
        legend: {
          top: 80,
          itemWidth: this.titleFontSize / 1.1,
          itemHeight: this.titleFontSize / 1.1,
          textStyle: {
            fontSize: this.titleFontSize / 1.1
          }
        },
        series: [
          {
            radius: this.titleFontSize * 4.52,
            center: ['50%', '55%']
          }
        ]
      })
      this.dom.resize()
    },
    toLeft() {
      this.currentIndex--;
      if (this.currentIndex <= 0) {
        this.currentIndex = this.data.length - 1;
      }
      this.updateChart();
    },
    toRight() {
      this.currentIndex++;
      if (this.currentIndex >= this.data.length) {
        this.currentIndex = 0;
      }
      this.updateChart();
    },
  },
};
</script>

<style lang="less" scoped>
.arrow_left {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 10%;
  cursor: pointer;
  color: #fff;
}
.arrpw_right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 10%;
  cursor: pointer;
  color: #fff;
}
.pie_title {
  position: absolute;
  bottom: 25px;
  right: 15%;
  color: #fff;
}
</style>